<template>
    <div class="back_contain_n mine-account">
        <div class="title">全品类销售额动态数据</div>
        <div class="Search_Top_Part">
            <el-form inline="true">
                <el-form-item label="">
					<el-select v-model="year" placeholder="" @change="hancleChange" class="formItem">
						<el-option v-for="item in yearsList" :key="item" :label="item" :value="item"></el-option>
					</el-select>
                </el-form-item>
                <el-form-item label="">
                    <div class="search_bt">
                        <span @click="getList" class="zll-search" >搜索</span>
                        <span  @click="exportExcel" class="zll-search edit" style="margin-left: 20px"><i class="el-icon-download"></i>
                            下载</span>
                    </div>
                </el-form-item>
            </el-form>
        </div>

        <div class="echartsBox">
			<MyEcharts :params="tableData"></MyEcharts>
        </div>

        <div class="zll-table">
			<el-table :data="tableData" style="width: 100%" border v-loading="tableLoading">
				<el-table-column label="月份" prop="month" align="center"></el-table-column>
				<el-table-column label="伸缩(元)" prop="ss" align="center"></el-table-column>
				<el-table-column label="多支(元)" prop="dz" align="center"></el-table-column>
				<el-table-column label="U型(元)" prop="ux" align="center"></el-table-column>
				<el-table-column label="单支(元)" prop="dzlp" align="center"></el-table-column>
				<el-table-column label="月度全品合计(元)" prop="monthlyTotal" align="center"></el-table-column>
			</el-table>
        </div>
		<form action="/jinl/orderStatistics/exportAllTypesPriceList" method="post"
			  style="display: none;" ref="downloadContentFile" >
			<input name="queryJson" :value="queryJson"/>
		</form>
    </div>
</template>

<script>
    import MyEcharts from "./myEcharts.vue";
	import {getStore} from "@/plugins/localStore";
    export default {
        components: { MyEcharts },
        data() {
            return {
				queryJson:'',
				yearsList: [],
				year: '',
                tableData: [],
                tableLoading:false
            };
        },
        methods: {
			getList(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				self.$http({
					url: "/jinl/orderStatistics/getAllTypesPriceList",
					method: "post",
					data: JSON.stringify({year:this.year}),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result.monthlyData;
						self.tableData.push({
							month:'年度单品合计（元）',
							ss:resp.result.annualData.ssAnnualTotal,
							dz:resp.result.annualData.dzAnnualTotal,
							ux:resp.result.annualData.uxAnnualTotal,
							dzlp:resp.result.annualData.dzlpAnnualTotal,
							monthlyTotal:resp.result.annualData.annualTotal,
						})
					}
				});

			},
			exportExcel(){
				let user = getStore();
				let self = this;
				let queryForm = {
					year: this.year,
					name:user.userName,
				};
				queryForm.name = encodeURIComponent(queryForm.name);
				self.queryJson = JSON.stringify(queryForm);
				self.$nextTick(() => {
					self.$refs.downloadContentFile.submit();
				})
			},
			hancleChange(){
				this.getList();
			},
			getRecentYears(count) {
				const current = new Date().getFullYear();
				return Array.from({ length: count }, (_, i) => (current - (count - 1) + i));
			},
        },
        mounted() {
			let self = this;
			self.getList();
        },
		created() {
			this.yearsList = this.getRecentYears(3);
			this.year = this.yearsList[this.yearsList.length - 1];
		},
    };
</script>

<style lang="scss" scoped>
    @import "@/style/SearchTop.scss";

    .title {
        font-size: 24px;
        text-align: center;
        margin-bottom: 30px;
    }

    .formItem {
        ::v-deep .el-input__inner {
            width: 200px !important;
            text-align: center;
        }

    }

    .search_bt {
        height: 40px;
        display: flex;
        align-items: center;
    }

    .echartsBox {
        width: 100%;
    }

    .zll-table {
        margin-top: 30px;
        .el-table th {
            font-size: 12px;
        }

        .el-table__cell {
            .el-tag {
                width: 60px;
                height: 26px;
                line-height: 26px;
                padding: 0;

                &.cancel_tag {
                    background: #fff;
                    border-color: #eee;
                    color: #ccc;
                }
            }
        }

        &.inspect-box_table {
            .el-table .cell {
                span {
                    &.ws {
                        margin: 0 1px;
                        color: #4caf50;
                    }

                    &.abnormal1 {
                        color: #fb2516;
                    }

                    &.abnormal2 {
                        color: #fb2516;
                    }
                }
            }
        }
    }
</style>